<!-- global_dashboard/templates/dashboard.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='logo/logo.webp') }}"/>
    <title>大模型开源洞察大屏</title>
    <!-- 引入Google Fonts和必要的库 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <!-- MDB CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.css" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
    
    <style>
        /* 在这里可以添加一些页面特定的样式，如果需要的话 */
    </style>
</head>
<body>
    <header class="header">
        <h1>大模型开源洞察大屏</h1>
    </header>

    <main class="main-content">
        <div class="container-fluid dashboard-grid">
            <div class="row g-4">
                <!-- 第一行 -->
                <div class="col-md-6">
                    <!-- 语言热度排行榜面板 -->
                    <div class="card text-white bg-dark mb-3">
                        <div class="card-header">
                            <h2 class="card-title">语言支持热度排行榜</h2>
                        </div>
                        <div class="card-body">
                            <table class="table table-striped table-dark" id="languageHeatTable">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>语言</th>
                                        <th>总影响力</th>
                                        <th>模型数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 语言热度数据将动态插入这里 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                  <!-- 作者排行榜面板 -->
                  <div class="card text-white bg-dark mb-3">
                      <div class="card-header">
                          <h2 class="card-title">作者排行榜</h2>
                      </div>
                      <div class="card-body">
                          <table class="table table-striped table-dark" id="authorHeatTable">
                              <thead>
                                  <tr>
                                      <th>排名</th>
                                      <th>作者</th>
                                      <th>总影响力</th>
                                      <th>模型数量</th>
                                  </tr>
                              </thead>
                              <tbody>
                                  <!-- 作者热度数据将动态插入这里 -->
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
                <div class="col-md-6">
                    <!-- 公司类型排行榜面板 -->
                    <div class="card text-white bg-dark mb-3">
                        <div class="card-header">
                            <h2 class="card-title">组织类型排行榜</h2>
                        </div>
                        <div class="card-body">
                            <canvas id="orgTypeChart" class="visualization"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <!-- 任务类型排行榜面板 -->
                    <div class="card text-white bg-dark mb-3">
                        <div class="card-header">
                            <h2 class="card-title">任务类型排行榜</h2>
                        </div>
                        <div class="card-body">
                            <canvas id="taskTypeChart" class="visualization"></canvas>
                        </div>
                    </div>
                </div>

               

                <!-- 新增面板：TOP20大模型树图 -->
                <div class="col-md-12">
                    <div class="card text-white bg-dark mb-3">
                        <div class="card-header">
                            <h2 class="card-title">TOP大模型树图</h2>
                        </div>
                        <div class="card-body">
                            <div id="treemap"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 不醒人室团队制作</p>
    </footer>

    <!-- Top10模态框 -->
    <div class="modal fade" id="top10Modal" tabindex="-1" aria-labelledby="top10ModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="top10ModalLabel">Top 10 模型</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="关闭"></button>
          </div>
          <div class="modal-body">
            <ul id="top10List" class="list-group list-group-flush">
              <!-- Top10模型信息将动态插入这里 -->
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                <span class="material-icons">close</span> 关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 在这里嵌入数据，使用 default 过滤器提供默认值 -->
    <script>
        window.dashboardData = {
            "languageInfo": {{ language_info | tojson | default({}, true) }},
            "orgTypeInfo": {{ org_type_info | tojson | default({}, true) }},
            "taskTypeInfo": {{ task_type_info | tojson | default({}, true) }},
            "languageDict": {{ language_dict | tojson | default({}, true) }},
            "orgTypeDict": {{ org_type_dict | tojson | default({}, true) }},
            "taskTypeDict": {{ task_type_dict | tojson | default({}, true) }},
            "authorInfo": {{ author_info | tojson | default({}, true) }},
            "authorDict": {{ author_dict | tojson | default({}, true) }},
            "top20_models": {{ top20_models | tojson | default([], true) }}
        };
    </script>

    <!-- 引入必要的库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.0/mdb.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <!-- Bootstrap JS Bundle (包含Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 引入自定义JavaScript -->
    <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</body>
</html>
